<template>
  <div class="w-100">
    <template v-if="productShow == 0">
      <div class="flex-1 mt-1 row-ac-fw">
        <div class="goods-item-0 bg-white" v-for="(item, index) in productList" :key="index">
          <div class="goods-img-0 row">
            <img  v-if="item.image_list && item.image_list[0] && item.image_list[0].url" :src=" item.image_list[0].url " alt="" />
          </div>
          <div class="flex-1 mx-1 mt-1">
            <div class="in2line font-s-2 font-w goods-name">{{ item.product_name }}</div>
            <div class="flex-1 row-ac mt-1">
              <div class="font-s-3 font-w" style="color: red;"><span class="font-s-1">￥</span>{{ item.price }}</div>
              <div class="font-s-1 text-de text-light-grey ml-1">￥{{ item.mar_price }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="productShow == 1">
      <div class="w-100 mt-1 goods-box-1">
        <div class="goods-item-1 bg-white" v-for="(item, index) in productList" :key="index">
          <div class="goods-img-1 row">
            <img  v-if="item.image_list && item.image_list[0] && item.image_list[0].url" :src="item.image_list[0].url" alt="" />
          </div>
          <div class="mx flex-1 mt">
            <div class="in1line flex-1 font-s-1">{{ item.product_name }}</div>
            <div class="font-s-2 font-w text-danger mt"><span class="font-s-1">￥</span>{{ item.price }}</div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="productShow == 2">
      <div class="flex-1 mt-1 goods-box-2">
        <div class="goods-item-2 row-ac bg-white" v-for="(item, index) in productList" :key="index">
          <div class="goods-img-2 row">
            <img  v-if="item.image_list && item.image_list[0] && item.image_list[0].url" :src="item.image_list[0].url" alt="" />
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
  import {
    applicationUrl,
  } from "@/utils/interface"
  import {
    productListUrl
  } from "@/utils/product"
  export default {
    data() {
      return {
        productType: '',
        productShow: '',
        queryInfo: {
          is_recommend: '',
          is_hot: '',
          is_new: '',
          page: 1,
          pageSize: 10
        },
        productList: []
      }
    },
    props: {
      goodsId: {
        type: Number,
        default: ''
      },
      initProductShow: {
        type: Number,
        default: 0
      },
      initProductType: {
        type: Number,
        default: 0
      }
    },
    created() {
      //this.getApplication(this.goodsId)
      this.getproductList()
    },
    watch: {
      initProductShow(newVal) {
        console.log(newVal);
        this.productShow = newVal
      },
      initProductType(newVal) {
        this.productType = newVal
        if (this.productType === 0) {
          this.queryInfo.is_recommend = 'True'
          this.queryInfo.is_new = ''
          this.queryInfo.is_hot = ''
        } else if (this.productType === 1) {
          this.queryInfo.is_recommend = ''
          this.queryInfo.is_new = 'True'
          this.queryInfo.is_hot = ''
        } else if (this.productType === 2) {
          this.queryInfo.is_recommend = ''
          this.queryInfo.is_new = ''
          this.queryInfo.is_hot = 'True'
        } else if (this.productType === 3) {
          this.queryInfo.is_recommend = ''
          this.queryInfo.is_new = ''
          this.queryInfo.is_hot = ''
        }
        this.getproductList() // 在这里调用getproductList()方法
      }
    },
    mounted() {
      // 监听父组件的refresh事件
      this.$parent.$on('refresh', this.refresh);
    },
    methods: {
      refresh(){
        this.getApplication()
        console.log('接收刷新');
      },
      getproductList() {
        this.$get(productListUrl).then(res => {
          this.productList = res.data.data.list
          this.total = res.data.data.total
          console.log(this.productList);
        })
      },
    }
  }
</script>

<style lang="scss">
  .goods-item-0 {
    width: 48%;
    height: 228px;
    box-shadow: 0 1px 5px #999999;
    margin-right: 4%;
    margin-bottom: 10px;
    border-radius: 10px;

    .goods-img-0 {
      width: 100%;
      height: 128px;
      background-color: #EEEEEE;
      border-radius: 10px 10px 0 0;

      img {
        width: 100%;
        height: 100%;
        border-radius: 10px 10px 0 0;
      }
    }

    .goods-name {
      width: 100%;
      height: 40px;
    }

    &:nth-child(2n) {
      margin-right: 0;
    }
  }

  .goods-box-1 {
    height: 130px;
    display: -webkit-box;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;

    .goods-item-1 {
      width: 26%;
      height: 120px;
      margin-right: 10px;
      box-shadow: 0 1px 5px #E7E7E7;
      border-radius: 10px;

      .goods-img-1 {
        width: 100%;
        height: 72px;
        background-color: #EEEEEE;

        img {
          width: 100%;
          height: 100%;
          border-radius: 10px 10px 0 0;
        }
      }
    }
  }

  .goods-box-1::-webkit-scrollbar {
    display: none;
  }

  .goods-box-2 {
    .goods-item-2 {
      width: 100%;
      height: 110px;
      box-shadow: 0 1px 5px #E7E7E7;
      border-radius: 10px;
      margin-bottom: 12px;

      .goods-img-2 {
        width: 100px;
        height: 100px;
        border-radius: 12px;
        margin-left: 5px;
        background-color: #EEEEEE;

        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }
    }

  }
</style>
